<template>
  <div>
    <!--  头部  -->
    <header>
      <nav-top :classId="null"></nav-top>
    </header>
    <section>
      <!--      文章详情头部-->
      <div class="article-title">
        <div>
          <div class="article-title-info">
            <h2>{{ items.article_title }}</h2>
            <div>
              <p>
                <span>关注者</span>
                <span>{{ items.article_follow_num }}</span>
              </p>
              <el-divider
                direction="vertical"
                class="divider-height"
              ></el-divider>
              <p>
                <span>被浏览</span>
                <span>{{ items.article_watch_num }}</span>
              </p>
            </div>
          </div>
          <div class="article-title-operating">
            <div>
              <button
                :class="is_collection ? 'btn-unCollection' : 'btn-collection'"
                @click="followType()"
              >
                {{ is_collection ? "已收藏" : "收藏问题" }}
              </button>
              <button class="btn-edit-question" @click="writeAnswer()">
                <i class="el-icon-edit"></i>写回答
              </button>
              <button class="btn-invite" @click="hideInfoInvite()">
                <i class="el-icon-s-custom">邀请回答</i>
              </button>
              <p @click="hideInfoComment()">
                <i class="icon-comment"></i>
                <span>
                  {{
                    items.article_comment_num
                      ? items.article_comment_num + "条评论"
                      : "添加评论"
                  }}
                </span>
              </p>
              <p @click="hideInfoShare()">
                <i class="icon-share"></i>
                <span>分享</span>
              </p>
              <p @click="hideInfoReport()">
                <i class="el-icon-s-flag"></i>
                <span>举报</span>
              </p>
              <p @click="hideInfoMore()">
                <i class="el-icon-more"></i>
              </p>
            </div>
            <p>
              <span>纸条君也关注了该问题</span>
              <img src="../assets/images/avatar(1).png" alt="" />
            </p>
            <div class="cover">
              <transition name="fade">
                <div class="cover-share" v-show="is_share">
                  <div
                    class="copy-share-link-top"
                    @click="copy_link_top"
                    data-clipboard-action="copy"
                    data-clipboard-text="hhh"
                  >
                    <img src="../assets/images/copy-link.png" alt="" />复制链接
                  </div>
                  <div>
                    <img src="../assets/images/weibo.png" alt="" />新浪微博
                  </div>
                  <div>
                    <img src="../assets/images/wechat.png" alt="" />微信扫一扫
                  </div>
                  <img src="../assets/images/wechatQR.png" alt="" />
                </div>
              </transition>
              <transition name="fade">
                <div class="cover-more" v-show="is_more">
                  <p>没有帮助</p>
                  <p>举报</p>
                </div>
              </transition>
            </div>
          </div>
          <div
            class="article-cover"
            v-show="is_comment || is_invite || is_report"
          >
            <div class="comment-cover" v-if="is_comment">
              <i @click="hideInfoComment()" class="el-icon-close"></i>
              <div class="title">
                <h3>20 条评论</h3>
                <p><i class="icon-ctime"></i>切换为时间排序</p>
              </div>
              <div class="commit-content">
                <div
                  class="commit-info-item"
                  v-for="(c_item, c_index) in items.comment_content"
                  :key="c_index"
                >
                  <div>
                    <img :src="c_item.img_src" alt="" />
                    <p>{{ c_item.user_name }}</p>
                  </div>
                  <div>
                    <p>{{ c_item.content }}</p>
                    <span>
                      <i class="icon-like"></i>{{ c_item.comment_like }}
                    </span>
                  </div>
                  <p>{{ c_item.user_time }}</p>
                </div>
              </div>
              <div class="reply-bottom">
                <label for="">
                  <input
                    type="text"
                    maxlength="100"
                    placeholder="写下你的评论..."
                  />
                </label>
                <button class="btn-publish" disabled>
                  发布
                </button>
              </div>
            </div>
            <div class="invite-cover" v-if="is_invite">
              <i @click="hideInfoInvite()" class="el-icon-close"></i>
              <div class="header">
                <h3>立即邀请用户，更快获得回答</h3>
                <div>
                  <input class="input-search" placeholder="搜索你想邀请的人" />
                  <i class="el-icon-search"></i>
                </div>
              </div>
              <div class="invite-content">
                <div
                  class="invite-content-item"
                  v-for="(i_item, i_index) in inviteItem"
                  :key="i_index"
                >
                  <div>
                    <img :src="i_item.img_src" alt="" />
                    <div>
                      <p>{{ i_item.user_name }}</p>
                      <p>{{ i_item.user_type }}</p>
                    </div>
                  </div>
                  <el-button class="btn-invite" size="small" type="success"
                    >邀请回答</el-button
                  >
                </div>
              </div>
            </div>
            <div class="report-cover" v-if="is_report">
              <i @click="hideInfoReport()" class="el-icon-close"></i>
              <div>
                <div class="report-title">
                  <h3>举报</h3>
                  <p>请选择举报理由</p>
                </div>
                <div class="report-content">
                  <div>
                    <span>低质问题</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                  <div>
                    <span>垃圾广告信息</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                  <div>
                    <span>有害信息</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                  <div>
                    <span>涉嫌侵权</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                  <div>
                    <span>其他</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <el-button class="btn-report" disabled type="success">
                  举报
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      主体部分-->
      <div class="main">
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="main-content">
              <div class="all-question" v-show="!is_edit">
                查看全部{{ items.all_answer_num }}个回答
              </div>
              <div class="edit-write" v-show="is_edit">
                <div class="mine-info">
                  <div>
                    <img src="../assets/images/user-avatar.png" alt="" />
                    <div>
                      <p class="user_name">陆陆的巩大炮</p>
                      <p class="user_type">
                        UI设计师
                        <span><i class="el-icon-edit"></i>编辑话题经验 </span>
                      </p>
                    </div>
                  </div>
                  <p>使用匿名身份回答</p>
                </div>
                <div id="editor">
                  <mavon-editor
                    :toolbars="toolbar"
                    v-model="editValue"
                    fontSize="15px"
                    :boxShadow="false"
                    defaultOpen="edit"
                    ref="md"
                    @imgAdd="$imgAdd"
                    @imgDel="$imgDel"
                    @change="changeMavon"
                    @save="saveMavon"
                    placeholder="写回答..."
                  ></mavon-editor>
                  <div class="save-article">
                    <div>
                      <span v-show="saving">自动保存中...</span>
                    </div>
                    <p><i class="el-icon-s-tools"></i>设置</p>
                    <el-button @change="saveMavon" class="btn-save" size="mini">
                      提交回答
                    </el-button>
                  </div>
                  <span v-html="mavon"></span>
                </div>
              </div>
              <div class="articleInfo-header" v-show="is_edit">
                <h4>2,634 个回答</h4>
                <span>默认排序<i class="icon-ud-arrow"></i></span>
              </div>
              <div
                class="content-info"
                v-for="(article_item, article_index) in items2"
                :key="article_index"
              >
                <div class="user-info">
                  <img :src="items.avatar_src" alt="" />
                  <p>
                    <span>{{ items.user_name }},</span>
                    <span>公众号：{{ items.wechat_name }}</span>
                  </p>
                </div>
                <p>{{ article_item.liked_num }}人赞同了该回答</p>
                <div
                  class="article-content"
                  v-html="
                    article_item.article_show
                      ? article_item.article_content
                      : article_item.article_content_new
                  "
                ></div>
                <p v-show="article_item.article_show">
                  编辑于{{ article_item.edit_end_time }}
                </p>
                <p
                  @click="openSup(article_index)"
                  class="open-sup"
                  v-show="!article_item.article_show"
                >
                  展开阅读全文 <i class="el-icon-arrow-down"></i>
                </p>
                <!--        操作        -->
                <div class="item-operating">
                  <div @click="changeLike(article_index)">
                    <i
                      class="icon"
                      :class="[
                        article_item.isLike ? 'icon-liked' : 'icon-like'
                      ]"
                    ></i
                    >{{ article_item.likeNump }}
                  </div>
                  <div @click="showComment(article_index)">
                    <i class="icon icon-comment"></i>
                    {{
                      article_item.isComment
                        ? "收起评论"
                        : article_item.comment_num + "条评论"
                    }}
                  </div>
                  <div @click="toggleShare(article_index)">
                    <i class="icon icon-share"></i>分享
                  </div>
                  <div><i class="icon icon-collection"></i>收藏</div>
                  <div><i class="icon icon-dislike"></i>踩</div>
                  <div @click="toggleMore(article_index)">
                    <i class="el-icon-more"></i>
                  </div>
                  <div
                    class="hide-content"
                    @click="hideContent(article_index)"
                    v-show="article_item.article_show"
                  >
                    收起<i class="el-icon-arrow-up"></i>
                  </div>
                </div>
                <div class="comment-cover" v-show="article_item.isComment">
                  <div class="comment-title">
                    <h4>{{ article_item.comment_num }} 条评论</h4>
                    <p>
                      <i class="icon-ctime"></i>
                      切换为时间排序
                    </p>
                  </div>
                  <div
                    class="comment-content"
                    v-for="(content_item,
                    comment_index) in article_item.comment_content.slice(
                      article_item.pageStart,
                      article_item.pageCount
                    )"
                    :key="comment_index"
                  >
                    <div>
                      <div>
                        <img :src="content_item.img_src" alt="" />
                        <span>{{ content_item.user_name }}</span>
                      </div>
                      <span>4个月前</span>
                    </div>
                    <div>
                      <p>
                        {{ content_item.content }}
                      </p>
                      <p>
                        <i class="icon-like"></i>
                        {{ content_item.comment_like }}
                      </p>
                    </div>
                    <div
                      class="reply-comment"
                      v-for="(child_comment,
                      child_index) in content_item.child_comment_content"
                      :key="child_index"
                    >
                      <div class="child-reply-title">
                        <div>
                          <img :src="child_comment.child_img_src" alt="" />
                          <span>
                            {{ child_comment.child_user_name }}
                          </span>
                          <span>回复</span>
                          <span>
                            {{ content_item.user_name }}
                          </span>
                        </div>
                        <span>4个月前</span>
                      </div>
                      <div class="content-info">
                        <p>{{ child_comment.child_content }}</p>
                        <i class="icon-like"></i>
                        <span>{{ child_comment.child_comment_like }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="comment-pagination">
                    <el-pagination
                      :page-size="2"
                      :pager-count="5"
                      @current-change="handleCurrentChange"
                      @prev-click="afterPage(article_index)"
                      @next-click="nextPage(article_index)"
                      layout="prev, pager, next"
                      prev-text="上一页"
                      next-text="下一页"
                      :total="article_item.comment_content.length"
                    >
                    </el-pagination>
                  </div>
                </div>
                <div class="cover">
                  <transition name="fade">
                    <div class="cover-share" v-show="article_item.isShare">
                      <div
                        class="copy-share-link"
                        @click="copy_link(article_index)"
                        data-clipboard-action="copy"
                        :data-clipboard-text="article_item.a"
                      >
                        <img
                          src="../assets/images/copy-link.png"
                          alt=""
                        />复制链接
                      </div>
                      <div>
                        <img src="../assets/images/weibo.png" alt="" />新浪微博
                      </div>
                      <div>
                        <img
                          src="../assets/images/wechat.png"
                          alt=""
                        />微信扫一扫
                      </div>
                      <img src="../assets/images/wechatQR.png" alt="" />
                    </div>
                  </transition>
                  <transition name="fade">
                    <div class="cover-more" v-show="article_item.isMore">
                      <p>没有帮助</p>
                      <p>举报</p>
                    </div>
                  </transition>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="main-right">
              <div class="user-info-card">
                <h4>关于作者</h4>
                <div class="user-info">
                  <img :src="items.avatar_src" alt="" />
                  <p>
                    <span>{{ items.user_name }}</span>
                    <span>公众号:{{ items.wechat_name }}</span>
                  </p>
                </div>
                <div class="user-hot">
                  <div>
                    <span>回答</span><span>{{ items.user_answer }}</span>
                  </div>
                  <div>
                    <span>文章</span><span>{{ items.user_article }}</span>
                  </div>
                  <div>
                    <span>关注者</span><span>{{ items.user_follow_num }}</span>
                  </div>
                </div>
                <div class="user-btn">
                  <button class="btn-follow">
                    <i v-show="items.is_follow" class="el-icon-plus"></i>
                    {{ items.is_follow ? "关注她" : "取消关注" }}
                  </button>
                  <button class="btn-send">
                    <i class="icon-comment"></i>发私信
                  </button>
                </div>
              </div>
              <div class="related-issues">
                <h4>相关问题</h4>
                <div>
                  <p>有没有一些有关于远方含义的句子？<span>16 个回答</span></p>
                  <p>有哪些看似简单却饱含深意的句子？<span>8个 回答</span></p>
                  <p>
                    有哪些话是你第一次见到就被惊艳到且说&nbsp;中内心？
                    <span>8个回答</span>
                  </p>
                  <p>人为什么会无端变得落寞？<span>8个回答</span></p>
                  <p>关于遇见的句子？<span>8个回答</span></p>
                </div>
              </div>
              <div class="related-recommend">
                <h4>相关推荐</h4>
                <div
                  class="related-read"
                  v-for="(item3, index3) in 2"
                  :key="index3"
                >
                  <img src="../assets/images/teacher-avatar.png" alt="" />
                  <div>
                    <p>我写，故我不在：一个废话</p>
                    <p v-if="index3 - 1">《新周刊》</p>
                    <div>
                      <span>8 人读过</span>
                      <button><i class="el-icon-folder-opened"></i>阅读</button>
                    </div>
                  </div>
                </div>
              </div>
              <p>
                Copyright©2019 Lawpro<br />
                沪ICP备19012546号
              </p>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>
  </div>
</template>

<script>
import "mavon-editor/dist/css/index.css";
export default {
  name: "UserArticle",
  data() {
    return {
      // 评论
      is_comment: false,
      is_share: false,
      is_more: false,
      is_invite: false,
      // 举报
      is_report: false,
      // 写回答value
      editValue: "",
      // markdown格式
      mavon: "",
      is_edit: false,
      saving: false,
      // 显示视频上传
      is_video_up: false,
      is_collection: false,
      toolbar: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        underline: false, // 下划线
        strikethrough: false, // 中划线
        mark: false, // 标记
        superscript: false, // 上角标
        subscript: false, // 下角标
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        preview: true // 预览
      },
      items: {
        article_title: "有哪些第一次读到便震撼的句子?",
        article_follow_num: "50,807",
        article_watch_num: "16,039,938",
        article_comment_num: 20,
        all_answer_num: "1,234",
        avatar_src: require("../assets/images/avatar(1).png"),
        user_name: "温柔坐在酒杯里",
        wechat_name: "神经漫游日记",
        user_answer: 23,
        user_article: 3,
        user_follow_num: 6194,
        is_follow: true,
        comment_content: [
          {
            img_src: require("../assets/images/avatar(1).png"),
            user_name: "灯灯1",
            user_time: "10天",
            content: "凡事过去 皆为序章",
            comment_like: 117
          },
          {
            img_src: require("../assets/images/avatar(1).png"),
            user_name: "灯灯1",
            user_time: "10天",
            content: "凡事过去 皆为序章",
            comment_like: 117
          },
          {
            img_src: require("../assets/images/avatar(1).png"),
            user_name: "灯灯1",
            user_time: "10天",
            content: "凡事过去 皆为序章",
            comment_like: 117
          },
          {
            img_src: require("../assets/images/avatar(1).png"),
            user_name: "灯灯1",
            user_time: "10天",
            content: "凡事过去 皆为序章",
            comment_like: 117
          },
          {
            img_src: require("../assets/images/avatar(1).png"),
            user_name: "灯灯1",
            user_time: "10天",
            content: "凡事过去 皆为序章",
            comment_like: 117
          },
          {
            img_src: require("../assets/images/avatar(1).png"),
            user_name: "灯灯1",
            user_time: "10天",
            content: "凡事过去 皆为序章",
            comment_like: 117
          },
          {
            img_src: require("../assets/images/avatar(1).png"),
            user_name: "灯灯1",
            user_time: "10天",
            content: "凡事过去 皆为序章",
            comment_like: 117
          }
        ]
      },
      items2: [
        {
          a: "www.baidu.com",
          liked_num: "16,171",
          article_content:
            "1.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />2.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />3.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />4.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />5.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />6.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />7.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />8.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />9.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />10.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />",
          article_content_new: "",
          edit_end_time: "2019-07-24",
          article_show: false,
          isLike: false,
          isComment: false,
          isShare: false,
          isMore: false,
          likeNum: 9,
          likeNump: 0,
          pageStart: 0,
          pageCount: 2,
          comment_num: 876,
          comment_content: [
            {
              img_src: require("../assets/images/avatar(1).png"),
              user_name: "灯灯1",
              user_time: "10天",
              content: "凡事过去 皆为序章",
              comment_like: 117,
              child_comment_content: [
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "安妮的熊",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                },
                {
                  child_img_src: require("../assets/images/avatar(1).png"),
                  child_user_name: "灯灯",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                }
              ]
            },
            {
              img_src: require("../assets/images/user-avatar.png"),
              user_name: "灯灯2",
              user_time: "",
              content: "凡事过去 皆为序章",
              comment_like: 117,
              child_comment_content: [
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "安妮的熊",
                  child_user_time: "",
                  child_content:
                    "凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章",
                  child_comment_like: 117
                },
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "灯灯",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                }
              ]
            },
            {
              img_src: require("../assets/images/user-avatar.png"),
              user_name: "灯灯3",
              user_time: "",
              content: "凡事过去 皆为序章",
              comment_like: 117,
              child_comment_content: [
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "安妮的熊",
                  child_user_time: "",
                  child_content:
                    "凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章",
                  child_comment_like: 117
                },
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "灯灯",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                }
              ]
            }
          ]
        },
        {
          a: "www.baidu.com",
          liked_num: "16,171",
          article_content:
            "去年生日跟闺蜜一起过的，然后她在朋友圈发了三张连拍，是我正在吹蛋糕的照片，照片里的我眼睛瞪的斗大看起来都翻白眼了，光线蜡黄，大脸浮肿，丑到我自己都怀疑人生，我曾经说过让她删掉，结果她说后面还配了一张好看的自拍，没事的。其实我真的很生气很想发飙，但是还是忍了没说话。现在打开她朋友圈看到那个照片我还是一样很难受，但是她不愿意删。其实如果是搞怪的丑我还觉得没啥，就是那个就是俗气的纯丑.",
          // article_content:
          //   "1.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />2.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />3.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />4.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />5.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />6.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />7.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />8.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />9.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />10.<p>总之岁月漫长，然而值得等待。——村上春树</p><br />",
          article_content_new: "",
          edit_end_time: "2019-07-24",
          article_show: false,
          isLike: false,
          isComment: false,
          isShare: false,
          isMore: false,
          likeNum: 6194,
          likeNump: 0,
          pageStart: 0,
          pageCount: 2,
          comment_num: 876,
          comment_content: [
            {
              img_src: require("../assets/images/avatar(1).png"),
              user_name: "灯灯1",
              user_time: "",
              content: "凡事过去 皆为序章",
              comment_like: 117,
              child_comment_content: [
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "安妮的熊",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                },
                {
                  child_img_src: require("../assets/images/avatar(1).png"),
                  child_user_name: "灯灯",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                }
              ]
            },
            {
              img_src: require("../assets/images/user-avatar.png"),
              user_name: "灯灯2",
              user_time: "",
              content: "凡事过去 皆为序章",
              comment_like: 117,
              child_comment_content: [
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "安妮的熊",
                  child_user_time: "",
                  child_content:
                    "凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章",
                  child_comment_like: 117
                },
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "灯灯",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                }
              ]
            },
            {
              img_src: require("../assets/images/user-avatar.png"),
              user_name: "灯灯3",
              user_time: "",
              content: "凡事过去 皆为序章",
              comment_like: 117,
              child_comment_content: [
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "安妮的熊",
                  child_user_time: "",
                  child_content:
                    "凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章凡事过去 皆为序章",
                  child_comment_like: 117
                },
                {
                  child_img_src: require("../assets/images/user-avatar.png"),
                  child_user_name: "灯灯",
                  child_user_time: "",
                  child_content: "凡事过去 皆为序章",
                  child_comment_like: 117
                }
              ]
            }
          ]
        }
      ],
      inviteItem: [
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "乔木",
          user_type: "知识竞赛",
          is_invite: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "乔木",
          user_type: "知识竞赛",
          is_invite: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "乔木",
          user_type: "知识竞赛",
          is_invite: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "乔木",
          user_type: "知识竞赛",
          is_invite: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "乔木",
          user_type: "知识竞赛",
          is_invite: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "乔木",
          user_type: "知识竞赛",
          is_invite: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "乔木",
          user_type: "知识竞赛",
          is_invite: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "乔木",
          user_type: "知识竞赛",
          is_invite: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "乔木",
          user_type: "知识竞赛",
          is_invite: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "乔木",
          user_type: "知识竞赛",
          is_invite: false
        }
      ]
    };
  },
  created() {},
  mounted() {
    this.countWord();
  },
  methods: {
    countWord: function() {
      let item = this.items2;
      item.forEach((item, index) => {
        //计算点赞数
        if (item.likeNum > 9999) {
          item.likeNump = (item.likeNum / 10000).toFixed(2).slice(0, 2) + "万";
        } else if (item.likeNum > 999) {
          item.likeNump = (item.likeNum / 1000).toFixed(2).slice(0, 3) + "千";
        } else {
          item.likeNump = item.likeNum + "";
        }
        // 收起显示的字数
        item.article_content_new = item.article_content.slice(0, 150);
        // 第一个全部显示
        if (index === 0) {
          item.article_show = true;
        }
      });
      this.items2 = item;
    },
    // 收藏
    followType() {
      this.is_collection = !this.is_collection;
    },
    // 写回答
    writeAnswer() {
      this.is_edit = !this.is_edit;
    },
    // 显示隐藏邀请
    hideInfoInvite() {
      this.is_invite = !this.is_invite;
    },
    // 显示隐藏评论
    hideInfoComment() {
      this.is_comment = !this.is_comment;
    },
    // 显示隐藏分享
    hideInfoShare() {
      this.is_share = !this.is_share;
    },
    // 显示隐藏举报
    hideInfoReport() {
      this.is_report = !this.is_report;
    },
    // 显示隐藏举报
    hideInfoMore() {
      this.is_more = !this.is_more;
    },
    // 文章详情
    openSup(index) {
      this.items2[index].article_show = true;
    },
    //点赞
    changeLike(index) {
      this.items2[index].isLike = !this.items2[index].isLike;
      if (this.items2[index].isLike) {
        this.items2[index].likeNum++;
      } else {
        this.items2[index].likeNum--;
      }
      this.countWord();
    },

    //评论
    showComment(index) {
      this.items2[index].isComment = !this.items2[index].isComment;
    },
    // 更多
    toggleMore(index) {
      this.items2[index].isMore = !this.items2[index].isMore;
    },
    // 收起
    hideContent(index) {
      this.items2[index].article_show = !this.items2[index].article_show;
    },
    //分享
    toggleShare: function(index) {
      this.items2[index].isShare = !this.items2[index].isShare;
    },
    // 顶部复制
    copy_link_top() {
      this.$message({
        message: "复制链接成功！",
        type: "success",
        center: true,
        duration: 2000,
        offset: 120
      });
      //复制链接
      let clipboard = new this.clipboard(".copy-share-link-top");
      clipboard.on("success", function() {
        console.log(1);
      });
      clipboard.on("error", function() {
        console.log(2);
      });
      this.is_share = !this.is_share;
    },
    //复制链接提示
    copy_link(index) {
      this.$message({
        message: "复制链接成功！",
        type: "success",
        center: true,
        duration: 2000,
        offset: 120
      });
      //复制链接
      let clipboard = new this.clipboard(".copy-share-link");
      clipboard.on("success", function() {
        console.log(1);
      });
      clipboard.on("error", function() {
        console.log(2);
      });
      this.items2[index].isShare = !this.items2[index].isShare;
    },
    // 页数
    handleCurrentChange(val) {
      console.log(val);
    },
    // 前一页
    afterPage(index) {
      this.items2[index].pageStart = this.items2[index].pageStart - 2;
      this.items2[index].pageCount = this.items2[index].pageCount - 2;
    },
    // 后一页
    nextPage(index) {
      this.items2[index].pageStart = this.items2[index].pageStart + 2;
      this.items2[index].pageCount = this.items2[index].pageCount + 2;
    },
    showVideoUp() {
      this.is_video_up = true;
    },
    hideVideoUp() {
      this.is_video_up = false;
    },
    //上传视频成功
    handleVideoSuccess() {},
    // 验证
    beforeUploadVideo() {},
    // 上传进度
    uploadVideoProcess() {},
    // 保存回答
    saveArticle() {},
    // 绑定@imgAdd event
    $imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append("image", $file);
      this.axios({
        url: "server url",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" }
      }).then(url => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        // $vm.$img2Url 详情见本页末尾
        this.$refs.md.$img2Url(pos, url);
      });
    },
    // 绑定@imgDel event
    $imgDel(pos) {
      delete this.img_file[pos];
    },
    // ctrl+s
    saveMavon() {},
    // change
    changeMavon(val, render) {
      // console.log(val, render);
      this.mavon = render;
      this.saving = true;
    }
  }
};
</script>

<style scoped lang="less">
header {
  z-index: 999;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 10px 0;
  background-color: #fff;
  box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
}
section {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin-top: 55px;
  background-color: #f6f6f6;

  .article-title {
    width: 100%;
    padding: 55px 0;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(224, 224, 224, 0.52);

    & > div {
      width: 1000px;
      padding: 0 20px;
      margin: 0 auto;

      .article-title-info {
        display: flex;
        justify-content: space-between;

        & > div {
          display: flex;
          text-align: center;

          & > p {
            display: flex;
            flex-direction: column;

            & > span:first-child {
              font-size: 15px;
              color: #999;
            }

            & > span:last-child {
              font-size: 18px;
              font-weight: bold;
              color: #070707;
            }
          }
          & > p:first-child {
            & > span:last-child {
              cursor: pointer;
              &:hover {
                color: #6b9147;
              }
            }
          }

          .divider-height {
            height: 3rem;
          }
        }
      }

      .article-title-operating {
        position: relative;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;

        & > div {
          display: flex;
          align-items: center;

          button {
            height: 35px;
            margin-right: 20px;
            font-size: 15px;
            border-radius: 3px;
            cursor: pointer;
          }

          .btn-collection {
            width: 105px;
            color: #fff;
            border: 2px solid #6b9147;
            background-color: #6b9147;

            &:hover {
              background-color: #689d35;
            }
          }
          .btn-unCollection {
            width: 105px;
            color: #fff;
            border: 2px solid #8590a5;
            background-color: #8590a5;
            &:hover {
              background-color: #8590a6;
            }
          }

          .btn-edit-question {
            width: 102px;
            color: #6b9147;
            border: 2px solid #6b9147;
            background-color: #fff;

            &:hover {
              background-color: rgba(207, 241, 179, 0.18);
            }
          }

          .btn-invite {
            width: 115px;
            color: #95998f;
            border: 2px solid #95998f;
            background-color: #fff;
            box-shadow: 0 2px 5px 0 rgba(224, 224, 224, 0.52);

            &:hover {
              background-color: rgba(0, 0, 0, 0.03);
            }
          }

          .el-icon-more {
            color: #95998f;
          }

          & > p {
            margin-right: 20px;
            font-size: 15px;
            color: #95998f;
            cursor: pointer;

            i {
              display: inline-block;
              width: 15px;
              height: 15px;
              color: #95998f;
              cursor: pointer;
              vertical-align: middle;
              background-size: 100% 100%;
            }

            & > span {
              margin-left: 5px;
            }
          }
        }

        & > p {
          display: flex;
          align-items: center;
          font-size: 16px;
          color: #999;

          img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
            border-radius: 50%;
          }
        }
        .cover {
          .cover-share {
            z-index: 99;
            position: absolute;
            top: 50px;
            left: 450px;
            text-align: center;
            font-size: 14px;
            color: #95998f;
            background-color: #fff;
            box-shadow: 0 0 10px #eaeaea;
            &:before {
              z-index: 0;
              position: absolute;
              top: -15px;
              left: 55px;
              content: "";
              width: 0;
              border: solid;
              border-color: transparent transparent #fff transparent;
              border-width: 0 10px calc(10px * 1.732);
              text-shadow: 0 0 5px #333333;
            }
            div {
              display: flex;
              align-items: center;
              padding: 10px 15px;
              font-size: 14px;
              color: #95998f;
              cursor: pointer;
              &:hover {
                color: #6b9147;
                background-color: rgba(0, 0, 0, 0.05);
              }
              img {
                width: 15px;
                height: 13px;
                margin-right: 10px;
              }
            }
            & > img {
              width: 100px;
              height: 100px;
            }
          }
          .cover-more {
            z-index: 1;
            position: absolute;
            top: 50px;
            left: 575px;
            width: 110px;
            font-size: 14px;
            color: #95998f;
            box-sizing: border-box;
            background-color: #fff;
            box-shadow: 0 0 10px #eaeaea;
            cursor: pointer;
            &:before {
              z-index: 0;
              position: absolute;
              top: -15px;
              left: 50px;
              content: "";
              width: 0;
              border: solid;
              border-color: transparent transparent #fff transparent;
              border-width: 0 10px calc(10px * 1.732);
              text-shadow: 0 0 5px #333333;
            }
            p {
              padding: 10px 15px;
              &:hover {
                color: #6b9147;
                background-color: rgba(0, 0, 0, 0.05);
              }
            }
          }
        }
      }
      .article-cover {
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        .el-icon-close {
          position: absolute;
          right: -50px;
          top: 15px;
          font-size: 30px;
          color: #fff;
          cursor: pointer;
        }
        .comment-cover {
          position: relative;
          width: 800px;
          height: 650px;
          margin: 30px auto;
          border-radius: 2px;
          background-color: #fff;
          .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #eaeaea;

            p {
              font-size: 15px;
              color: #95998f;
              cursor: pointer;
              i {
                display: inline-block;
                width: 16px;
                height: 13px;
                margin-right: 5px;
                background-size: 100% 100%;
              }
            }
          }
          .commit-content {
            height: 80%;
            padding: 15px 0 0 15px;
            overflow-y: scroll;
            .commit-info-item {
              padding: 10px 0 10px;
              border-bottom: 1px solid #eaeaea;
              & > div {
                display: flex;
                align-items: center;
              }
              & > div:first-child {
                img {
                  width: 25px;
                  height: 25px;
                  margin-right: 10px;
                }
                p {
                  font-size: 15px;
                  font-weight: bold;
                  color: #000;
                }
              }
              & > div:nth-child(2) {
                display: flex;
                justify-content: space-between;
                margin: 10px 35px;
                font-size: 15px;
                & > p {
                  color: #000;
                }
                & > span {
                  color: #95998f;
                  cursor: pointer;
                  i {
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    margin-right: 5px;
                    background-size: 100% 100%;
                  }
                }
              }
              & > p {
                margin-left: 35px;
                font-size: 15px;
                color: #95998f;
              }
            }
          }
          .reply-bottom {
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            width: 800px;
            padding: 10px 15px;
            border-top: 1px solid #eaeaea;
            box-sizing: border-box;
            label {
              width: 690px;
              input[type="text"] {
                width: 100%;
                height: 35px;
                padding: 0 10px;
                border-radius: 3px;
                box-sizing: border-box;
                border: 1px solid #888;
              }
            }
            .btn-publish {
              height: 35px;
              padding: 0 15px;
              font-size: 14px;
              color: #fff;
              border: none;
              border-radius: 3px;
              background-color: #6b9147;
              cursor: pointer;
            }
          }
        }
        .invite-cover {
          position: relative;
          width: 800px;
          height: 650px;
          margin: 30px auto;
          border-radius: 2px;
          background-color: #fff;
          .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #eaeaea;
            & > div {
              display: flex;
              align-items: center;
              padding: 0 10px;
              border-radius: 4px;
              border: 1px solid #eaeaea;
              .input-search {
                width: 160px;
                height: 30px;
                border: none;
                background-color: #fff;
              }
            }
          }
          .invite-content {
            height: 88%;
            padding: 15px 15px 0;
            overflow-y: scroll;
            .invite-content-item {
              display: flex;
              justify-content: space-between;
              padding: 20px 0;
              border-bottom: 1px solid #eaeaea;
              & > div {
                display: flex;
                & > img {
                  width: 45px;
                  height: 40px;
                  margin-right: 15px;
                }
              }
              .btn-invite {
                height: 35px;
                border: none;
                border-radius: 2px;
                background-color: #6b9147;
              }
            }
          }
        }
        .report-cover {
          position: relative;
          width: 350px;
          height: 430px;
          padding: 20px 10px;
          margin: 150px auto;
          border-radius: 3px;
          box-sizing: border-box;
          background-color: #fff;
          .report-title {
            text-align: center;
            & > p {
              margin: 5px 0;
              font-size: 13px;
              color: #95998f;
            }
          }
          .report-content {
            margin: 15px 10px;
            & > div {
              display: flex;
              justify-content: space-between;
              padding: 15px 0;
              border-bottom: 1px solid #eaeaea;
              cursor: pointer;
              span {
                font-size: 13px;
                color: #000;
              }
            }
          }
          .btn-report {
            display: block;
            width: 200px;
            margin: 30px auto 0;
            cursor: pointer;
          }
        }
      }
    }
  }

  .main {
    width: 1000px;
    margin: 15px auto;
    padding: 0 15px;

    .main-content {
      .all-question {
        width: 100%;
        height: 65px;
        text-align: center;
        line-height: 65px;
        font-size: 15px;
        color: #999;
        cursor: pointer;
        border-radius: 3px;
        background-color: #fff;
        box-shadow: 0 4px 4px 4px rgba(237, 237, 237, 0.4);

        &:hover {
          color: #6b9147;
        }
      }
      .edit-write {
        .mine-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 15px;
          box-sizing: border-box;
          background-color: #fff;
          border-bottom: 1px solid #e9e9e9;
          & > div {
            display: flex;
            align-items: center;
            img {
              width: 45px;
              height: 45px;
              margin-right: 10px;
              border-radius: 2px;
            }
            .user_name {
              font-size: 15px;
              font-weight: bold;
              color: #363636;
            }
            .user_type {
              font-size: 14px;
              color: #4c4c4c;
              span {
                display: inline-block;
                margin-top: 5px;
                color: #8590a6;
                cursor: pointer;
                i {
                  margin: 0 5px;
                }
              }
            }
          }
          & > p {
            font-size: 15px;
            color: #8590a6;
            cursor: pointer;
          }
        }
      }
      .articleInfo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 30px;
        margin: 10px 0 -10px 0;
        background-color: #fff;
        span {
          font-size: 15px;
          color: #8590a6;
          cursor: pointer;
          &:hover {
            color: #666;
          }
          i {
            display: inline-block;
            width: 11px;
            height: 14px;
            margin-left: 5px;
            background-size: 100% 100%;
          }
        }
      }
      .content-info {
        padding: 40px 30px;
        margin-top: 10px;
        background-color: #fff;

        .user-info {
          display: flex;

          img {
            width: 45px;
            height: 45px;
            margin-right: 10px;
            cursor: pointer;
          }

          p {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;

            & > span:first-child {
              font-size: 16px;
              font-weight: bold;
              color: #333;
            }

            & > span:last-child {
              font-size: 15px;
              color: #454545;
            }
          }
        }

        & > p {
          margin: 30px 0;
          font-size: 15px;
          color: #95998f;
        }
        .open-sup {
          text-align: center;
          cursor: pointer;
          &:hover {
            color: #888;
          }
        }

        .article-content {
          font-size: 15px;
          color: #000;
          line-height: 1.6;
        }
      }

      .item-operating {
        display: flex;
        /*justify-content: space-between;*/
        align-items: center;
        width: 100%;
        color: #95998f;
        font-size: 15px;

        div {
          display: flex;
          align-items: center;
          margin-right: 20px;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }

          .icon {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 5px;
            vertical-align: middle;
            background-size: 100% 100%;
          }
        }
        .hide-content {
          margin-left: auto;
        }
      }

      .comment-cover {
        z-index: 1;
        position: relative;
        padding: 20px 10px;

        .comment-title {
          display: flex;
          justify-content: space-between;
          padding: 25px 20px;
          border-radius: 4px;
          box-shadow: 0 2px 5px 0 rgba(224, 224, 224, 0.52);

          p {
            font-size: 15px;
            color: #95998f;
            cursor: pointer;

            i {
              display: inline-block;
              width: 16px;
              height: 14px;
              background-size: 100% 100%;
            }
          }
        }

        .comment-pagination {
          padding: 10px 0;
          text-align: center;
          border-radius: 4px;
          box-shadow: 0 2px 5px 0 rgba(224, 224, 224, 0.52);
        }

        .comment-content {
          padding: 20px;
          box-shadow: 0 2px 5px 0 rgba(224, 224, 224, 0.33);

          & > div:first-child {
            display: flex;
            align-items: center;
            justify-content: space-between;

            div {
              display: flex;
              align-items: center;

              img {
                width: 33px;
                height: 33px;
                margin-right: 10px;
                cursor: pointer;
              }

              span {
                font-size: 16px;
                font-weight: bold;
                color: #333;
                cursor: pointer;
              }
            }

            span {
              font-size: 16px;
              color: #95998f;
            }
          }

          & > div:nth-child(2) {
            margin: 10px 40px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f6f6f6;

            p:first-child {
              display: -webkit-box;
              margin: 10px 0;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 4;
              overflow: hidden;
              font-size: 16px;
              color: #000;
            }

            p:nth-child(2) {
              display: flex;
              align-items: center;
              color: #95998f;
              font-size: 15px;

              i {
                display: inline-block;
                width: 16px;
                height: 16px;
                margin-right: 5px;
                background-size: 100% 100%;
                cursor: pointer;
              }
            }
          }

          .reply-comment {
            padding: 10px 0 10px 40px;

            .child-reply-title {
              display: flex;
              justify-content: space-between;
              align-items: center;

              div {
                display: flex;
                align-items: center;

                img {
                  width: 33px;
                  height: 33px;
                  margin-right: 10px;
                  cursor: pointer;
                }

                & > span {
                  font-size: 16px;
                  color: #333;
                  font-weight: bold;
                  cursor: pointer;
                }

                & > span:nth-child(3) {
                  margin: 0 10px;
                  font-size: 15px;
                  color: #95998f;
                  font-weight: 400;
                  cursor: default;
                }
              }

              & > span {
                font-size: 15px;
                color: #95998f;
              }
            }

            .content-info {
              padding: 0 40px 10px;
              border-bottom: 1px solid #f6f6f6;

              p {
                display: -webkit-box;
                margin: 10px 0;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 30px;
                font-size: 16px;
                color: #000;
              }

              i {
                display: inline-block;
                width: 15px;
                height: 15px;
                margin-right: 5px;
                background-size: 100% 100%;
                cursor: pointer;
              }

              span {
                font-size: 15px;
                color: #95998f;
              }
            }

            &:last-child {
              border-bottom: none;
            }
          }
        }
      }

      .cover {
        position: relative;
        .cover-share {
          z-index: 99;
          position: absolute;
          top: 30px;
          left: 135px;
          text-align: center;
          font-size: 14px;
          color: #95998f;
          background-color: #fff;
          box-shadow: 0 0 10px #eaeaea;
          &:before {
            z-index: 0;
            position: absolute;
            top: -15px;
            left: 55px;
            content: "";
            width: 0;
            border: solid;
            border-color: transparent transparent #fff transparent;
            border-width: 0 10px calc(10px * 1.732);
            text-shadow: 0 0 5px #333333;
          }
          div {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            font-size: 14px;
            color: #95998f;
            cursor: pointer;
            &:hover {
              color: #6b9147;
              background-color: rgba(0, 0, 0, 0.05);
            }
            img {
              width: 15px;
              height: 13px;
              margin-right: 10px;
            }
          }
          & > img {
            width: 100px;
            height: 100px;
          }
        }
        .cover-more {
          z-index: 1;
          position: absolute;
          top: 30px;
          left: 305px;
          width: 110px;
          font-size: 14px;
          color: #95998f;
          box-sizing: border-box;
          background-color: #fff;
          box-shadow: 0 0 10px #eaeaea;
          cursor: pointer;
          &:before {
            z-index: 0;
            position: absolute;
            top: -15px;
            left: 50px;
            content: "";
            width: 0;
            border: solid;
            border-color: transparent transparent #fff transparent;
            border-width: 0 10px calc(10px * 1.732);
            text-shadow: 0 0 5px #333333;
          }
          p {
            padding: 10px 15px;
            &:hover {
              color: #6b9147;
              background-color: rgba(0, 0, 0, 0.05);
            }
          }
        }
      }
    }
    .main-right {
      .user-info-card {
        padding: 20px 25px;
        background-color: #fff;
        box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);

        & > h4 {
          padding-bottom: 15px;
          border-bottom: 1px solid #f7f7f7;
        }

        .user-info {
          display: flex;
          padding: 20px 0;
          border-radius: 3px;
          border-bottom: 1px solid #f7f7f7;
          box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);

          & > img {
            width: 70px;
            height: 70px;
            margin-right: 10px;
            cursor: pointer;
          }

          & > p {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10px 0;

            & > span:first-child {
              font-size: 19px;
              font-weight: bold;
              color: #101010;
            }

            & > last-child {
              font-size: 14px;
              color: #1c1c1c;
            }
          }
        }

        .user-hot {
          display: flex;
          justify-content: space-around;
          margin: 20px 0;

          & > div {
            display: flex;
            flex-direction: column;
            text-align: center;
            cursor: pointer;
            &:hover > span {
              color: #6b9147 !important;
            }

            & > span:first-child {
              font-size: 15px;
              color: #95998f;
            }

            & > span:last-child {
              margin-top: 10px;
              font-size: 20px;
              font-weight: bold;
              color: #101010;
            }
          }
        }

        .user-btn {
          display: flex;
          justify-content: space-between;

          & > button {
            width: 130px;
            height: 35px;
            font-size: 15px;
            border-radius: 3px;
            cursor: pointer;

            i {
              display: inline-block;
              width: 19px;
              height: 17px;
              vertical-align: middle;
            }
          }

          .btn-follow {
            color: #fff;
            border: #6b9147;
            background-color: #6b9147;

            &:hover {
              background-color: #689d35;
            }
          }

          .btn-send {
            color: #95998f;
            border: 2px solid #95998f;
            background-color: #fff;

            &:hover {
              background-color: rgba(0, 0, 0, 0.05);
            }
          }
        }
      }
      .related-issues {
        padding: 20px 25px;
        margin-top: 15px;
        background-color: #fff;
        box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
        & > h4 {
          padding-bottom: 15px;
          border-bottom: 1px solid #f7f7f7;
        }
        & > div {
          padding: 10px 10px 0 0;
          line-height: 35px;
          font-size: 15px;
          p {
            color: #465a33;
            cursor: pointer;
            &:hover {
              color: #689d35;
            }
            span {
              color: #95998f;
            }
          }
        }
      }
      .related-recommend {
        padding: 20px 25px 0 25px;
        margin-top: 15px;
        background-color: #fff;
        box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
        & > h4 {
          padding-bottom: 15px;
          border-bottom: 1px solid #f7f7f7;
        }
        & > div:nth-child(2) {
          border-bottom: 1px solid #f7f7f7;
        }
        .related-read {
          display: flex;
          margin: 20px 0;
          padding-bottom: 20px;
          & > img {
            width: 90px;
            height: 70px;
            margin-right: 10px;
          }
          div {
            font-size: 14px;
            p {
              font-weight: bold;
              color: #101010;
            }
            div {
              display: flex;
              align-items: center;
              margin-top: 10px;
              color: #95998f;
              button {
                width: 60px;
                height: 25px;
                margin-left: auto;
                font-size: 15px;
                color: #fff;
                border-radius: 4px;
                border: #6b9147;
                background-color: #6b9147;
                cursor: pointer;
              }
            }
          }
        }
      }
      & > p {
        font-size: 15px;
        color: #7d8178;
        line-height: 30px;
      }
    }
  }
}
#editor {
  .save-article {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 15px;
    box-sizing: border-box;
    background-color: #fff;
    & > div {
      margin-right: auto;
      span {
        font-size: 14px;
        color: #8590a5;
      }
    }
    p {
      margin-right: 20px;
      color: #8590a6;
      cursor: pointer;
      i {
        margin-right: 5px;
      }
    }
    .btn-save {
      color: #fff;
      background-color: #6b9147;
      cursor: pointer;
    }
  }
}
</style>
